<template>
    <figure class="swiper" v-loading="loading">
        <div ref="preview" class="swiper-preview" :class="{ empty: loading }" @mouseenter="mouseEnter($event)" @mouseleave="mouseLeave($event)" v-if="!loading">
            <img :src="img_list[active_index]" v-lazy="img_list[active_index]" :key="img_list[active_index]" :style="previewStyle" ref="image" />
        </div>
        <div class="swiper-bottom" v-if="img_list.length > 0">
            <cite>
                <button @click="setActive('-1')" class="iconfont icon-zuo" :class="{ disabled: active_index <= 1 }"></button>
                <ul @mousewheel="onMousewheel($event)">
                    <li v-for="(item, index) in img_list" :key="index" :class="{ active: index == active_index }" @click="setActive(index)">
                        <img :src="item" v-lazy="item" :style="{ backgroundColor: color }" alt="" />
                    </li>
                    <li class="more-image" @click="openMoreDialog" v-show="mockup.length > 0">
                        <img v-lazy="'https://img.podpartner.com/static/images-20230202/detail-image-more.png'" alt="" />
                        <p>More</p>
                    </li>
                </ul>
                <button @click="setActive('+1')" class="iconfont icon-you" :class="{ disabled: active_index + 1 == (img_list || []).length }"></button>
            </cite>
        </div>
        <ProductMoreImageDialog v-model="moreDialog"></ProductMoreImageDialog>
    </figure>
</template>
<script>
export default {
    name: "MySwiper",
    props: {
        img_list: {
            type: Array,
            default: () => {
                return [];
            },
        },
        color: {
            type: String,
            default: "",
        },
        detail: {
            type: Object,
            default: () => { }
        }
    },
    data () {
        return {
            active_index: 0,
            rect: null,
            previewStyle: null,
            moreDialog: null,
        };
    },
    computed: {
        loading () {
            return false
            // return !(this.img_list || []).length > 0;
        },
        mockup () {
            let result;
            let list = typeof this.detail.mockup == 'object' ? this.detail.mockup : [];
            result = list.filter(item => item.show == true);
            return result
        }
    },
    methods: {
        openMoreDialog () {
            let data = { ...this.detail }
            data.mockup = this.mockup;
            this.moreDialog = data;
        },
        setActive (item) {
            let index = this.active_index;
            let active = 0;

            if (item == "-1") {
                // 向前
                active = Math.max(0, index - 1);
            } else if (item === "+1") {
                // 向右
                active = Math.min(this.img_list.length - 1, index + 1);
            } else {
                active = item;
            }
            if (active != this.active_index) {
                this.active_index = active;
                this.scrollToModel();
            }
        },

        // 滚动距离
        scrollToModel () {
            let index = this.active_index;
            let warp = this.$el.querySelector("ul");
            let elem = this.$el.querySelectorAll("li")[index];

            let scrollTo = (form, to) => {
                let left = form + (to > form ? form + 1 : form - 1);
                let over = to > form ? left >= to : left <= to;
                warp.scrollLeft = left;
                !over && setTimeout((e) => scrollTo(left, to), 1);
            };

            if (warp && elem) {
                let outer = warp.getBoundingClientRect();
                let inner = elem.getBoundingClientRect();
                let scrollLeft = warp.scrollLeft;

                let max = warp.scrollWidth - outer.width;
                let min = 0;
                let left = inner.left - outer.left + scrollLeft;
                let toleft = parseInt(left + 0.5 * inner.width - 0.5 * outer.width);

                // 缓动到目标点
                // scrollTo(scrollLeft,Math.min(max,Math.max(min,toleft)))

                warp.scrollLeft = Math.min(max, Math.max(min, toleft));
            }
        },

        // 鼠标进入
        mouseEnter (event) {
            let image = this.$refs.image;
            if (image && image.getAttribute("lazy") == "loaded") {
                this.rect = this.$refs.preview.getBoundingClientRect();
            }
        },
        mouseLeave (event) {
            this.rect = null;
            this.previewStyle = null;
        },
        mouseMove (event) {
            if (this.rect) {
                // scale是中点位置缩放
                const touch = (event.targetTouches || [])[0];
                const clientX = touch ? touch.clientX : event.clientX;
                const clientY = touch ? touch.clientY : event.clientY;

                let w = this.rect.width;
                let h = this.rect.height;
                let x = clientX - this.rect.left;
                let y = clientY - this.rect.top;

                let scale = 1.88;
                let left = -0.5 * x * (scale - 1);
                let top = -0.5 * y * (scale - 1);

                this.previewStyle = {
                    transform: `scale(${scale}) translate3d(${left}px,${top}px,0)`,
                };
            }
        },

        onMousewheel (event) {
            let v = event.wheelDelta / 2;
            let ul = event.target.closest("ul");

            if (ul) {
                ul.scrollLeft -= v;
                event.preventDefault();
            }
        },
    },
    mounted () {
        window.addEventListener("mousemove", this.mouseMove, false); // 鼠标移动
        window.addEventListener('touchmove', this.mouseMove, { passive: false }); // 鼠标移动
        // window.addEventListener('mousewheel',this.onMousewheel)
    },
    beforeDestroy () {
        window.removeEventListener("mousemove", this.mouseMove); // 鼠标移动
        window.removeEventListener("touchmove", this.mouseMove); // 鼠标移动
        // window.removeEventListener("mousewheel", this.onMousewheel);
    },
};
</script>
<style lang="scss" scoped>
.swiper {
    box-sizing: border-box;
    width: 526px;
    min-height: 300px;
    .swiper-preview {
        overflow: hidden;
        height: 526px;
        width: 526px;
        background: #f7f7f7;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        background-clip: padding-box;
        overflow: hidden;
        cursor: move;
        img {
            transform-origin: 0 0;
            height: 100%;
        }
    }

    .swiper-bottom {
        margin-top: 20px;
        position: relative;
        height: 66px;

        cite {
            position: absolute;
            display: block;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-size: 0;
            text-align: center;
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
        }

        button {
            display: inline-block;
            vertical-align: top;
            width: 24px;
            height: 100%;
            background: none;
            border: none;
            padding: 0;
            &:nth-child(3) {
                left: auto;
                right: 0;
            }
            &.disabled {
                cursor: default;
                color: #919191;
            }
        }
        ul {
            display: inline-block;
            vertical-align: top;
            max-width: calc(100% - 48px);
            overflow-x: auto;
            overflow-y: hidden;
            text-align: center;
            white-space: nowrap;
            &::-webkit-scrollbar {
                width: 0;
                height: 0;
            }
        }
        li {
            display: inline-block;
            vertical-align: top;
            position: relative;
            margin: 0 5px;
            width: 64px;
            height: 64px;
            border: 1px solid #dcdcdc;
            border-radius: 6px;
            overflow: hidden;
            cursor: pointer;

            img {
                border-radius: 6px;
                width: 100%;
                height: 100%;
                min-width: 32px;
            }

            &.active {
                border-color: #ea4c89;
                &:hover {
                    border-color: #ea4c89;
                }
            }

            &:hover {
                border-color: #ea4c897e;
            }
            &.more-image {
                p {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 14px;
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    color: #ffffff;
                    line-height: 16px;
                }
                background-color: #f6f6f6;
                border-color: #f0f0f0;
                &:hover {
                    background-color: #f0f0f0;
                    border-color: #f0f0f0;
                }
            }
        }
    }
}

@media (max-width: 960px) {
    .swiper {
        width: 100%;
        min-height: initial;

        .swiper-preview {
            width: 100%;
            padding-bottom: 100%;
            height: 0;
            position: relative;
            img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                transform: inherit !important;
            }
        }
    }
}
</style>
